<html>
  <body>
    <div>
      Standard embed: <br/>
      <iframe type="text/html" width="640" height="390" frameborder="0" 
              src="http://www.youtube.com/embed/u1zgFlCw8Aw">video</iframe>
      <br/><br/>
      Auto created embed: <br/>
      <div class="youtube-video" data-vid="ylLzyHk54Z0"></div>
      <div class="youtube-video" data-vid="_azWsQ3rFCg"></div>
      <br/><br/>
      Custom created embed: <br/>
      <a href="#" class="play" title="play" data-vid="I8xZBfVsMzs">click here to play</a>
    </div>
    <script src="//code.jquery.com/jquery-1.7.2.js"></script>
    <script src="jquery.ytiframetracker.js"></script>
    <script>
      jQuery(function ($) {
        var ytiframetracker = $.ytiframetracker({
          createSelector: '.youtube-video',
          createVidSource: function (e) { // where in the element to find the vid
            return $(e).attr('data-vid');
          },
          eventLabel: 'title',
          log: true
        });
        
        // it is possible to control the player once it's ready
        $('.youtube-video:first').bind('youTubePlayerReady', function (v, p) {
          // player is ready!
          p.playVideo(); // play it
          setTimeout(function () {  // stop after a few seconds
            p.stopVideo();
          }, 10000);            
        });
        
        $('a.play').click(function (e) {
          e.preventDefault();
          // create player and add tracking then play video
          var player = ytiframetracker.initPlayer($(this), function (p) {
            // we could've bound on 'youTubePlayerReady', but it's also possible
            // to just pass a function to the initPlayer to do the same
            
            // player is ready!
            p.playVideo(); // play it
          });
          // the returned player is not ready at this point
        });
      });
    </script>
  </body>
</html>